<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
          .aui_list{
              background-image: linear-gradient(0,#eee,#eee 50%,transparent 50%);
          }
          .aui-list-item{
              background-image:linear-gradient(0,#eee,#eee 50%,transparent 50%) !important;
          }
          .refound_footer_content a {
              display: flex;
              align-items: center;
          }
          .aui-list.aui-media-list {
            padding-bottom: 2rem;
          }
      </style>
  </head>
  <body>
<div id="app" >

<div class="user_nav_line"></div>
  <div class="aui-refresh-content">
    <ul class="aui-list aui-media-list">
      <li class="refoundAbout_content" v-if="info.refund">
        <div class="refoundAbout_content_one">
          <div class="refoundAbout_content_text_one">请等待商家处理</div>
          <div class="refoundAbout_content_text_two">{{info.refund.time}}</div>
        </div>
        <div class="refoundAbout_text_four">您已成功发起退款申请，请耐心等待商家处理</div>
        <div class="refoundAbout_flex">
          <text style="margin-top: 0.2rem;font-size:0.2rem;color:#999">● </text><div class="refoundAbout_text_five">商家同意或超时未处理，系统将退款给您</div>
        </div>
        <div class="refoundAbout_flex">
          <text  style="margin-top: 0.2rem;font-size:0.2rem;color:#999">● </text><div class="refoundAbout_text_six">如果商家拒绝，您可以修改退款申请后再次发起，商家会重新处理</div>
        </div>
        <div class="refoundAbout_clear">
          <!-- <div class="refound_change" @click="payRefund(id)">修改申请</div> -->
        </div>
      </li>
      <li><div class="user_nav_line"></div></li>
      <li class=" aui-list-item-middle apply_main_li" v-for="item in info.goods" style="background:#F7F7F7;">
      <div class="aui-media-list-item-inner">
          <div class="aui-list-item-media" style="width: 4rem;">
              <img :src="item.goods_pic" class="aui-list-img-md">
          </div>
          <div class="aui-list-item-inner">
                <div class="aui-list-item-text">
                    <div  class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                      <div class="aui-font-size-12">{{item.goods_name}}</div>
                      <div class="aui-list-item-text aui-font-size-12" style="margin-top: 0.2rem;">{{item.sku_info}}<div  class="aui-list-item-right">×{{item.goods_nums}}</div></div>
                   </div>
                  </div>
              </div>
          </div>
       </li>
       <li class="aui-list-item aui-list-item-middle" style="padding-top:0.75rem;padding-bottom:0.75rem;" v-if="info.refund">
           <div class="aui-media-list-item-inner refound_nav_height">
              <div class="aui-list-item-media aui-font-size-12" style="padding-right:0.5rem;width:3.5rem;padding-right:0;">退款原因:</div>
              <div class="aui-list-item-inner aui-font-size-12" style="padding-top: 0.6rem;">{{info.refund.return_reson}}</div>
           </div>
           <div class="aui-media-list-item-inner refound_nav_height">
              <div class="aui-list-item-media aui-font-size-12" style="padding-right:0.5rem;width:3.5rem;padding-right:0;">退款金额:</div>
              <div class="aui-list-item-inner aui-font-size-12" style="padding-top: 0.6rem;">￥{{info.refund.refund_money}}</div>
           </div>
           <div class="aui-media-list-item-inner refound_nav_height">
              <div class="aui-list-item-media aui-font-size-12" style="padding-right:0.5rem;width:3.5rem;padding-right:0;">申请时间:</div>
              <div class="aui-list-item-inner aui-font-size-12" style="padding-top: 0.6rem;">{{info.refund.addtime}}</div>
           </div>
           <div class="aui-media-list-item-inner refound_nav_height">
              <div class="aui-list-item-media aui-font-size-12" style="padding-right:0.5rem;width:3.5rem;padding-right:0;">退款编号:</div>
              <div class="aui-list-item-inner aui-font-size-12" style="padding-top: 0.6rem;">{{info.refund.return_no}}</div>
           </div>
       </li>
    </ul>
  </div>
  <div class="refround_footer_main" v-if="info.refund">
    <div class="refound_footer_content" @click="open_chat_win('single')">
        <img src="../../image/my/m36.png" alt="" class="refound_footer_img">
        <div class="refound_footer_text">联系卖家</div>
    </div>
    <div class="refound_footer_content">
      <a :href="'tel:' + info.refund.store_mobile">
        <img src="../../image/my/m35.png" alt="" class="refound_footer_img">
        <div class="refound_footer_text">拨打电话</div>
      </a>
    </div>
    <div class="refound_footer_content">
      <a :href="'tel:' + info.refund.kefu_tel">
        <img src="../../image/my/m37.png" alt="" class="refound_footer_img">
        <div class="refound_footer_text">联系客服</div>
      </a>
    </div>
  </div>
<div>
<!--弹框-->

</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-popup.js"></script>
  <script type="text/javascript" src="../../script/aui-dialog.js"></script>
  <script type="text/javascript">
      apiready = function(){
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
              info: {},
              id: '',
              kf_id:""
            },
            created: function() {
                var $this = this;
                $this.id = api.pageParam.id
                $this.getOrder()
            },
            methods: {
              getOrder: function (fn) {
                var $this = this
                api.ajax({
                    url: window.Url.Freeorder_refundDetail,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            orderId: api.pageParam.id,
                        }
                    }
                }, function(ret, err) {
                    if (ret.re==1) {
                      console.log("退款详情页----"+JSON.stringify(ret))
                        $this.info = ret.data
                        $this.kf_id = "S"+ret.data.refund.store_id;
                        fn && fn()
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
              },
              payRefund: function (id){
                  api.openWin({
                      name: 'applyRefund',
                      url: './headerone.html',
                      pageParam: {
                          msg:'申请退款',
                          url:'./applyRefund.html',
                          id: id,
                          type: 2
                      }
                  });
              },


              // 客服聊天窗口
              // 打开对应的聊天窗口
              open_chat_win: function(type) {
                var $_this = this;
                  api.openWin({
                      name: type + '_chat_header_kf',
                      url: '../four_frame/four_headers/' + type + '_chat_header.html',
                      pageParam: {
                          target_name: "客服名字",
                          target_id: $_this.kf_id,
                          target_head_img:""
                      }
                  });
              }
            },
            mounted: function () {
              var $this = this
              api.hideProgress();
              var pullRefresh = new auiPullToRefresh({
                  container: document.querySelector('.aui-refresh-content'),
                  triggerDistance: 100
              }, function(ret) {
                  if (ret.status == "success") {
                    $this.getOrder(function () {
                      setTimeout(function () {
                        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                      }, 500)
                    })
                  }
              })
            }
        })
      }

  </script>
  </html>
